<template>
    <div>
        <el-form label-width="90px">
            <el-form-item label="SKU名称">
                <el-input placeholder="请输入SKU名称" v-model="skuParams.skuName"></el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input placeholder="请输入价格" type="number" v-model="skuParams.price"></el-input>
            </el-form-item>
            <el-form-item label="重量(g)">
                <el-input placeholder="请输入重量" type="number" v-model="skuParams.weight"></el-input>
            </el-form-item>
            <el-form-item label="SKU描述">
                <el-input type="textarea" placeholder="请输入SKU描述" v-model="skuParams.skuDesc"></el-input>
            </el-form-item>
            <el-form-item label="平台属性">
                <el-form :inline="true" label-width="80px">
                    <el-form-item v-for="(item, index) in attrArr" :key="item.id" :label="item.attrName">
                        <el-select v-model="item.attrIdAndValueId" style="width: 240px;margin: 5px 0;"
                            placeholder="请选择">
                            <el-option v-for="(i, index) in item.attrValueList" :key="i.id" :label="i.valueName"
                                :value="`${item.id}:${i.id}`"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form :inline="true">
                    <el-form-item v-for="item in saleArr" :key="item.id" :label="item.saleAttrName">
                        <el-select v-model="item.saleIdAndValueId" style="width: 240px;" placeholder="请选择">
                            <el-option :value="`${item.id}:${i.id}`" v-for="i in item.spuSaleAttrValueList"
                                :label="i.saleAttrValueName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片名称">
                <el-table :data="imgArr" border stripe ref="table">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="图片">
                        <template #="{ row, $index }">
                            <el-image style="width: 100px; height: 100px" :src="row.imgUrl" fit="fill" :lazy="true" />
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="imgName"></el-table-column>
                    <el-table-column label="操作">
                        <template #="{ row, $index }">
                            <el-button type="primary" @click="set(row)">设为默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { reqSpuImageList, reqSpuHasSaleAttr, reqAddSku } from '@/api/product/spu'
import { reqAttr } from '@/api/product/attr'
import type { SkuData } from '@/api/product/spu/type'
import { ElMessage } from 'element-plus'

let attrArr = ref<any>([])
let saleArr = ref<any>([])
let imgArr = ref<any>([])
let skuParams = reactive<SkuData>({
    price: '',
    skuName: '',
    skuDesc: '',
    weight: '',
    spuId: '',
    tmId: '',
    skuDefaultImg: '',
    category3Id: '',
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
    // skuImageList: [],
})
let table = ref<any>()
let $emit = defineEmits(['handleChange'])


const initSkuData = async (c1Id: number | string, c2Id: number | string, spu: any) => {
    skuParams.category3Id = spu.category3Id
    skuParams.spuId = spu.id
    skuParams.tmId = spu.tmId

    let res: any = await reqAttr(c1Id, c2Id, spu.category3Id)
    let res1: any = await reqSpuHasSaleAttr(spu.id)
    let res2: any = await reqSpuImageList(spu.id)

    attrArr.value = res.data
    saleArr.value = res1.data
    imgArr.value = res2.data
}
const save = async () => {
    skuParams.skuAttrValueList = attrArr.value.reduce((prev: any, next: any) => {
        if (next.attrIdAndValueId) {
            let [attrId, valueId] = next.attrIdAndValueId.split(':')
            prev.push({
                attrId,
                valueId
            })
        }
        return prev
    }, [])
    skuParams.skuSaleAttrValueList = saleArr.value.reduce((prev: any, next: any) => {
        if (next.saleIdAndValueId) {
            let [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(':')
            prev.push({
                saleAttrId,
                saleAttrValueId
            })
        }
        return prev
    }, [])

    // skuParams.skuImageList = imgArr.value.reduce((prev: any, next: any) => {
    //     if (next.imgName) {
    //         // 分别提取 imgName, imgUrl, spuId  
    //         const imgName = next.imgName;
    //         const imgUrl = next.imgUrl;
    //         const spuId = next.spuId;

    //         // 计算 isDefault 并作为字符串  
    //         const isDefault = next.imgUrl === skuParams.skuDefaultImg ? "true" : "false";

    //         // 将对象添加到 prev 数组中  
    //         // if(isDefault == "true"){
    //         prev.push({
    //             imgName,
    //             imgUrl,
    //             spuId,
    //             isDefault
    //         });

    //     }
    //     return prev;
    // }, []); // 初始值为空数组

    let res: any = await reqAddSku(skuParams)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '添加成功'
        })
        $emit('handleChange', { flag: 0, params: '' })
    } else {
        ElMessage({
            type: 'error',
            message: '添加失败'
        })
    }
}
const set = (row: any) => {
    table.value.clearSelection()
    //下面这个也可以实现清空复选框
    // imgArr.value.forEach((item: any) => {
    //     table.value.toggleRowSelection(item, false)
    // })
    table.value.toggleRowSelection(row, true)
    skuParams.skuDefaultImg = row.imgUrl
}
const cancel = () => {
    $emit('handleChange', {
        flag: 0,
        params: ''
    })
}

defineExpose({ initSkuData })

</script>

<style scoped></style>